import React, { useState } from "react";

import clsx from "clsx";

import Card from "@material-ui/core/Card";
import ListItem from "@material-ui/core/ListItem";

import SellBox from "./components/SellBox";
import BuyBox from "./components/BuyBox";
import { useTranslation } from "react-i18next";
import Typography from "@material-ui/core/Typography";
import { List } from "@material-ui/core";

export default function BuySellExchange() {
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick: any = (event: {
    currentTarget: React.SetStateAction<null>;
  }) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const [activeTab, setActiveTab] = useState("1");

  const toggle = (tab: React.SetStateAction<string>) => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  return (
    <>
      <Card className="exchange-box width-102 ">
        <Typography
          variant="h6"
          color="textPrimary"
          className="exchange-box-header font-size-xxl mt-4 ml-4"
        >
          {t("dashboard:buyExhchange_Header")}
        </Typography>
        <div className="d-flex align-items-center justify-content-between "></div>
        <div className="divider " />
        <div className=" d-flex align-items-center justify-content-between card-header-alt p-0 ">
          <List
            component="div"
            className="w-100 nav-line justify-content-center d-flex nav-line-alt nav-tabs-primary "
          >
            <ListItem
              button
              disableRipple
              className="px-5 py-4 exchange-box-tab"
              selected={activeTab === "1"}
              onClick={() => {
                toggle("1");
              }}
            >
              <Typography
                className="font-weight-bold text-uppercase "
                variant="subtitle1"
                color="textPrimary"
              >
                {t("buttons:buy_btn")}
              </Typography>
              <div className="divider" />
            </ListItem>
            <ListItem
              button
              disableRipple
              className="px-5 py-4 exchange-box-tab"
              selected={activeTab === "2"}
              onClick={() => {
                toggle("2");
              }}
            >
              <Typography
                className="font-weight-bold text-uppercase"
                variant="subtitle1"
                color="textPrimary"
              >
                {t("buttons:sell_btn")}
              </Typography>
              <div className="divider" />
            </ListItem>
          </List>
        </div>
        <div className="p-4 exhange-box-content mt-2">
          <div
            className={clsx("tab-item-wrapper exchange-box-btns", {
              active: activeTab === "1",
            })}
          >
            <BuyBox
              handleClick={handleClick}
              anchorEl={anchorEl}
              handleClose={handleClose}
            />
          </div>
          <div
            className={clsx(" tab-item-wrapper exchange-box-btns", {
              active: activeTab === "2",
            })}
          >
            <SellBox
              handleClick={handleClick}
              anchorEl={anchorEl}
              handleClose={handleClose}
            />
          </div>
        </div>
      </Card>
    </>
  );
}
